<template>
    <div class="CEAcceptance">
        <div class="header">
            <div :class='["itemlist", showMainIndex==1?"active":""]'
                 @click="changaNav(1)">验收记录</div>
            <div :class='["itemlist", showMainIndex==0?"active":""]'
                 @click="changaNav(0)">验收统计</div>
        </div>
        <div class="content"
             v-if="showMainIndex == 1">
            <div class="form-section">
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <div class="equipment-right-select"
                         @click="companyPropShow1 = true"
                         v-if="userInfo.departsir != '1'">
                        <span>{{departObj1.Name?departObj1.Name:'请选择'}}</span>
                        <i class="iconfont icon-jinru rightmsg"></i>
                    </div>
                    <div class="equipment-right-select"
                         v-else>
                        <span>{{departObj1.Name}}</span>
                    </div>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <datetime v-model="startDate1"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <datetime v-model="endDate1"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
            </div>
            <h2>总数: {{listAllCount1}}</h2>
            <noData v-if="listAllCount1 == 0"></noData>
            <div class="bscroll1">
                <vue-better-scroll class="wrapper"
                                   ref="scroll1"
                                   :scrollbar="scrollbarObj"
                                   :pullDownRefresh="pullDownRefreshObj"
                                   :pullUpLoad="pullUpLoadObj"
                                   :startY="parseInt(startY)"
                                   @pullingDown="onPullingDown"
                                   @pullingUp="onPullingUp"
                                   :key="1">
                    <div class="bscroll-container">
                        <ul ref="list"
                            class="list-content">
                            <li v-for="(item,index) in lists1"
                                :key="index">
                                <router-link :to="{path:'/CEAcceptanceDetail',query:{id:item.Id}}">
                                    <div>
                                        <h3>{{item.AcceptName}}</h3>
                                        <p>{{item.AcceptDate?item.AcceptDate.split(' ')[0]:''}}</p>
                                    </div>
                                    <x-icon type="ios-arrow-right"
                                            fill="#c8c8cd"
                                            size="26"></x-icon>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </vue-better-scroll>
            </div>
        </div>
        <div class="content"
             v-else>
            <div class="form-section">
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <div class="equipment-right-select"
                         @click="companyPropShow0 = true"
                         v-if="userInfo.departsir != '1'">
                        <span>{{departObj0.Name?departObj0.Name:'请选择'}}</span>
                        <i class="iconfont icon-jinru rightmsg"></i>
                    </div>
                    <div class="equipment-right-select"
                         v-else>
                        <span>{{departObj0.Name}}</span>
                    </div>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <datetime v-model="startDate0"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <datetime v-model="endDate0"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
            </div>
            <h2>总数: {{listAllCount0}}</h2>
            <ul class="title-nav">
                <li>单位名称</li>
                <li>验收次数</li>
            </ul>
            <noData v-if="lists1.length == 0"></noData>
            <div class="bscroll2">
                <vue-better-scroll class="wrapper"
                                   ref="scroll0"
                                   :scrollbar="scrollbarObj"
                                   :pullDownRefresh="pullDownRefreshObj"
                                   :pullUpLoad="pullUpLoadObj"
                                   :startY="parseInt(startY)"
                                   @pullingDown="onPullingDown"
                                   @pullingUp="onPullingUp"
                                   :key="0">
                    <div class="bscroll-container bscroll-container1">
                        <ul ref="list"
                            class="list-content">
                            <li v-for="(item,index) in lists0"
                                :key="index">
                                <p>{{item.DepartName}}</p>
                                <p>{{item.ConEleCount}}</p>
                            </li>
                        </ul>
                    </div>
                </vue-better-scroll>
            </div>
        </div>
        <companyProp :companyPropShow="companyPropShow0"
                     :selectCompany="selectCompany"></companyProp>
        <companyProp :companyPropShow="companyPropShow1"
                     :selectCompany="selectCompany"></companyProp>
        <myMenu ref="myMenu"></myMenu>
    </div>
</template>
<script>
import formatDate from '@/utils/formatDate'
import myMenu from '@/commonComponents/menu'
import VueBetterScroll from 'vue2-better-scroll'
import companyProp from '@/commonComponents/companyProp'
export default {
    data () {
        return {
            showMainIndex: 1, // 显示待整改隐患 0 施工统计 1 验收记录
            initCorrect: true, // 输出花的时候是否显示验收记录
            initMyMain: false, // 初始化的时候是否显示验收统计
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: {
                threshold: 90,
                stop: 40
            },
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            lists0: [], // 列表集合
            lists1: [],
            listCount0: 0, // 当前列表条数
            listCount1: 0, // 当前列表条数
            listAllCount0: 0, // 总条数
            listAllCount1: 0, // 总条数
            userInfo: {},
            pageIndex0: 0,
            pageIndex1: 0,
            startDate0: `${formatDate().split('-')[0]}-${formatDate().split('-')[1]}-01`, // 开始时间,
            startDate1: `${formatDate().split('-')[0]}-${formatDate().split('-')[1]}-01`, // 开始时间,
            endDate0: formatDate(),
            endDate1: formatDate(),
            departObj0: {
                Name: '',
                Id: ''
            },
            departObj1: {
                Name: '',
                Id: ''
            },
            companyPropShow0: false,
            companyPropShow1: false,
            sumCount: 0
        }
    },
    components: {
        VueBetterScroll,
        myMenu,
        companyProp
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.departObj0.Name = this.userInfo.deptname
        this.departObj0.Id = this.userInfo.deptid
        this.departObj1.Name = this.userInfo.deptname
        this.departObj1.Id = this.userInfo.deptid
    },
    mounted () {
        this.onPullingDown()
    },
    activated () {
        if (this.$refs.myMenu) this.$refs.myMenu.flag = false
    },
    methods: {
        changaNav (showMainIndex) {
            this.showMainIndex = showMainIndex
            this.$nextTick(() => {
                if (this[`listCount${this.showMainIndex}`] < this[`listAllCount${this.showMainIndex}`]) {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(true)
                } else {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(false)
                }
                if (!this.initMyMain && showMainIndex == 0) {
                    this.initMyMain = true
                    this.onPullingDown()
                }
                if (!this.initCorrect && showMainIndex == 1) {
                    this.initCorrect = true
                    this.onPullingDown()
                }
            })
        },
        // 模拟数据请求
        getData () {
            let params = {
                'allowPaging': true,
                'business': 'GetConEle',
                'data': {
                    'BusinessType': this.showMainIndex, // --业务类型参数 0：施工用电统计  1:施工用电查询 2:施工用电详细 3:存在问题
                    'CHECKNAME': '',
                    'CHECKTYPE': '',
                    'DeptID': this[`departObj${this.showMainIndex}`].Id, // --要查询的单位ID
                    'EndDate': this[`endDate${this.showMainIndex}`], //  --结束时间
                    'StartDate': this[`startDate${this.showMainIndex}`] // --开始时间
                },
                'pageIndex': this[`pageIndex${this.showMainIndex}`],
                'pageSize': 10,
                'tokenId': '81F40404A972CEBA7606E57440F374F3',
                'userId': this.userInfo.userid // -- - 用户ID
            }
            this.$axiosAjax.getConfigJson(params).then(res => {
                if (res.data.code === 0) {
                    if (this.showMainIndex === 0) {
                        this[`lists${this.showMainIndex}`] = this[`lists${this.showMainIndex}`].concat(res.data.data.result)
                        this.sumCount = res.data.data.sumCount
                    } else {
                        this[`lists${this.showMainIndex}`] = this[`lists${this.showMainIndex}`].concat(res.data.data)
                    }
                    this[`listAllCount${this.showMainIndex}`] = res.data.count
                    this[`listCount${this.showMainIndex}`] = this[`lists${this.showMainIndex}`].length
                }
                if (this[`listCount${this.showMainIndex}`] < this[`listAllCount${this.showMainIndex}`]) {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(true)
                } else {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(false)
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingDown () {
            // 模拟下拉刷新
            this[`listCount${this.showMainIndex}`] = 0
            this[`pageIndex${this.showMainIndex}`] = 0
            this[`lists${this.showMainIndex}`] = []
            this.getData()
        },
        onPullingUp () {
            // 模拟上拉 加载更多数据
            this[`pageIndex${this.showMainIndex}`]++
            this.getData()
        },
        selectCompany (item) {
            this[`companyPropShow${this.showMainIndex}`] = false
            this[`departObj${this.showMainIndex}`] = item
            this.onPullingDown()
        }
    }
}
</script>
<style scoped>
.paddingR12 {
    padding-right: 12px;
}
.header {
    height: 62px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-top: 5px;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
}
.CEAcceptance h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
    background: #ebeef2;
}
.itemlist {
    width: 75px;
    height: 100%;
    line-height: 62px;
    text-align: center;
    position: relative;
}
.itemlist.active {
    color: #2269ff;
}
.itemlist.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2269ff;
    height: 5px;
}
.division-line {
    height: 4px;
    background: #ebeef2;
}
.CEAcceptance .bscroll1 {
    position: absolute;
    top: 278px;
    bottom: 0;
    left: 20px;
    right: 0;
    overflow: hidden;
}
.CEAcceptance .bscroll2 {
    position: absolute;
    top: 320px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.CEAcceptance .bscroll2 p {
    width: 50%;
    text-align: center;
    color: #333;
}
.bscroll-container li {
    border-bottom: 1px solid #efeff4;
    padding: 18px 20px 12px 0;
}
.bscroll-container1 li,
.bscroll-container li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bscroll-container li h3 {
    font-size: 14px;
    color: #333;
    line-height: 20px;
    padding-bottom: 10px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bscroll-container li p {
    font-size: 14px;
    color: #999;
}
.title-nav {
    display: flex;
}
.title-nav li {
    width: 50%;
    line-height: 44px;
    text-align: center;
    border-bottom: 1px solid #f4f4f4;
    font-size: 14px;
    color: #333;
}
.title-nav li:first-child {
    border-right: 1px solid #f4f4f4;
}
</style>
